@charset "UTF-8";
html, body, .hr_, div {
  padding: 0;
  margin: 0;
}

body {
  background: #f4f4f4;
}

.log {
  position: absolute;
  width: 100%;
  height: 2.75rem;
  background: linear-gradient(#bcc4fd, #d7dbff);
  top: 0;
  left: 0;
  text-align: center;
}

.log .log_img {
  width: 90%;
}

.con_rili {
  position: relative;
  padding: 0.15rem 0 0.05rem 0;
  border-radius: 0.05rem;
  width: 92%;
  background: #ffffff;
  margin: 0 auto;
  z-index: 1;
  box-shadow: 5px 5px 15px #dfe0e2;
  margin-top: 60%;
}

.con_rili .rili_yue {
  margin-bottom: 0.12rem;
}

.con_rili .rili_yue img {
  display: block;
  width: 28%;
  margin: 0 auto;
}

.con_rili .rili_zhou {
  width: 93%;
  margin: 0 auto;
  margin-bottom: 0.15rem;
}

.con_rili .rili_zhou img {
  display: block;
  width: 100%;
  margin: 0 auto;
}

.con_rili .hr_ {
  width: 100%;
  height: 1px;
  background: #e6e6e6;
  border: none;
  margin-bottom: 0.15rem;
}

.con_rili .con_box {
  padding: 0 5px;
  position: relative;
}

.con_rili .con_box .f {
  width: 100%;
  display: flex;
  justify-content: space-around;
  margin-bottom: 0.12rem;
}

.con_rili .con_box .f div {
  width: 13.2%;
  height: 13.2%;
}

.con_rili .con_box .f div img {
  display: block;
  height: 100%;
  width: 100%;
}

.con_rili .con_box .f img {
  width: 13.2%;
  height: 13.2%;
}

.con_rili .con_box .f #css3_ {
  position: relative;
  /* 保持大小不变的小圆圈  */
  /* 产生动画（向外扩散变大）的圆圈  */
}

.con_rili .con_box .f #css3_ .dong {
  position: absolute;
  top: -0.01rem;
  left: -0.015rem;
}

@keyframes warn {
  0% {
    transform: scale(0.3);
    opacity: 0.0;
  }
  25% {
    transform: scale(0.3);
    opacity: 0.3;
  }
  50% {
    transform: scale(0.3);
    opacity: 0.3;
  }
  75% {
    transform: scale(0.5);
    opacity: 0.5;
  }
  100% {
    transform: scale(0.8);
    opacity: 0.0;
  }
}

.con_rili .con_box .f #css3_ .css3 > .container {
  position: relative;
  width: 100%;
  height: 100%;
  background: #000;
}

.con_rili .con_box .f #css3_ .dot {
  position: absolute;
  width: 0.16rem;
  height: 0.16rem;
  left: 0.125rem;
  top: 0.125rem;
  background: rgba(255, 255, 255, 0.8);
  border-radius: 50%;
  z-index: 2;
}

.con_rili .con_box .f #css3_ .pulse {
  position: absolute;
  width: 0.36rem;
  height: 0.36rem;
  left: -0.021rem;
  top: -0.021rem;
  border: 0.05rem solid white;
  border-radius: 50%;
  z-index: 2;
  opacity: 0;
  -webkit-animation: warn 1s ease-out;
  -moz-animation: warn 1s ease-out;
  animation: warn 1s ease-out;
  -webkit-animation-iteration-count: infinite;
  -moz-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  box-shadow: 0.01rem 0.01rem 0.1rem #fff;
}

.teshu {
  width: 100%;
}

.teshu img {
  width: 70%;
  display: block;
  margin: 0.15rem auto;
}

.state {
  width: 100%;
  text-align: center;
}

.state img {
  width: 90%;
  display: block;
  margin: 0 auto;
  margin-bottom: 0.15rem;
}

.content {
  width: 100%;
  display: flex;
  flex-direction: column;
}

.content .con_flex {
  width: 94%;
  margin: 0 auto;
  margin-top: 0.1rem;
}

.content .con_flex .one {
  padding-top: 0.1rem;
}

.content .con_flex img {
  display: block;
  width: 100%;
  padding-left: 1%;
}

.botm {
  width: 100%;
  height: 0.3rem;
  margin-bottom: 0.1rem;
  line-height: 0.1rem;
}

.botm p {
  font-size: 0.1rem;
  color: #b7b7b7;
  text-align: center;
}

#top {
  width: 0.3rem;
  height: 0.3rem;
  border-radius: 50%;
  position: fixed;
  right: 0;
  bottom: 30%;
  z-index: 2;
}

#top img {
  width: 100%;
  border-radius: 50%;
  opacity: 0.5;
}
